<template>
    <div class="wave-background">
      <div class="wave"></div>
    </div>
  </template>
  
  <script>
  export default {
    name: 'WaveBackground',
  };
  </script>
  
  <style scoped>
  .wave-background {
    position: relative;
    width: 100%;
    height: 100px; /* 波浪的高度，可以根据需要调整 */
  }
  
  .wave {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(255, 255, 255, 0.7);
    clip-path: polygon(
      0 0,
      100% 0,
      100% 80%, /* 波浪高度，可以根据需要调整 */
      0% 80%
    );
    animation: wave 3s linear infinite;
  }
  
  @keyframes wave {
    0% {
      transform: translateY(0);
    }
    50% {
      transform: translateY(-40px); /* 波浪起伏幅度，可以根据需要调整 */
    }
    100% {
      transform: translateY(0);
    }
  }
  </style>
  